<template>
    <div class="cropper">
        <a-modal v-model:open="state.isShow" title="更换头像" style="width: 800px;" :bodyStyle="{position:'relative',paddingBottom: '40px'}">
            <template #footer></template>
            <div class="cropper-warp">
                <div class="cropper-warp-left">
                    <ImgCutter
                        ref="imgCutterModalRef"
                        :tool="false"
                        modalTitle="图片裁剪"
                        label="选择本地图片"
                        fileType="jpeg"
                        :crossOrigin="true"
                        crossOriginHeader="*"
                        rate=""
                        toolBgc="none"
                        :isModal="false"
                        :showChooseBtn="true"
                        :lockScroll="true"
                        :boxWidth="550"
                        :boxHeight="458"
                        :cutWidth="250"
                        :cutHeight="250"
                        :sizeChange="true"
                        :moveAble="true"
                        :imgMove="true"
                        :originalGraph="false"
                        WatermarkText="vue-img-cutter"
                        WatermarkTextFont="12px Sans-serif"
                        WatermarkTextColor="#00ff00"
                        :WatermarkTextX="0.95"
                        :WatermarkTextY="0.95"
                        :smallToUpload="true"
                        :saveCutPosition="true"
                        :scaleAble="true"
                        :previewMode="true"
                        :quality="1"
                        accept="image/gif,image/jpeg,image/png"
                        :toolBoxOverflow="true"
                        @cutDown="cutDown"
                        @onPrintImg="onPrintImg"
                        >
                            <template #open>
                                <a-button>选择本地图片</a-button>
                            </template>
                            <template #choose>
                                <a-button>选择本地图片</a-button>
                            </template>
                            <template #cancel>
                                <a-button @click="handleClose">关闭</a-button>
                            </template>
                            <template #confirm>
                                <a-button type="primary">确认</a-button>
                            </template>
                    </ImgCutter>
                </div>
                <div class="cropper-warp-right">
                    <div class="cropper-warp-right-title">预览</div>
                    <div class="cropper-warp-right-item">
                        <div class="cropper-warp-right-value">
                            <a-image class="cropper-warp-right-value-img" :width="100" :height="100" :src="state.cropperImgBase64"
                            fallback="" />
                        </div>
                        <div class="cropper-warp-right-label">100 x 100</div>
                    </div>
                    <div class="cropper-warp-right-item">
                        <div class="cropper-warp-right-value">
                            <a-image class="cropper-warp-right-value-img" :width="50" :height="50" :src="state.cropperImgBase64"
                            fallback="" />
                        </div>
                        <div class="cropper-warp-right-label">50 x 50</div>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { nextTick, reactive,ref } from 'vue';
// @ts-ignore
import ImgCutter from 'vue-img-cutter';
import { useUserInfo } from '@/stores/userInfo';
import { storeToRefs } from 'pinia';

const userInfoStore = useUserInfo()
const { state: userInfoState } = storeToRefs(userInfoStore)
const imgCutterModalRef = ref<InstanceType<typeof ImgCutter>>()
const emits = defineEmits<{
    (e:"uploadCropperImg",val:Blob):void
}>()
const state =reactive({
    isShow:false,
    loading:false,
    cropperImgBase64:""
})
const onPrintImg = (img:any)=>{
    state.cropperImgBase64 = img.dataURL
}
const handleClose = ()=>{
    state.isShow = false
}
const handleOpen = ()=>{
    state.isShow = true
    nextTick(()=>{
        if(state.cropperImgBase64) return
        initCropper()
    })
}

// 初始化数据s
const initCropper = ()=>{
    imgCutterModalRef.value.handleOpen({
        name:"1.png",
        src:userInfoState.value.userInfos.avatar?.startsWith('/')?userInfoState.value.userInfos.avatar:"/" + userInfoState.value.userInfos.avatar,
    })
}

const cutDown = (img:any)=>{
    const blob = img.blob
    handleClose()
    emits('uploadCropperImg',blob)
}
defineExpose({
    handleOpen
})
</script>

<style lang="scss" scoped>
:deep(.ant-modal-body){
    position: relative;
    padding-bottom: 40px;
}
:deep(.i-dialog-footer){
    position: absolute;
}
.cropper-warp {
    display: flex;
    gap: 20px;
    
    .cropper-warp-left {
        flex: 1;
        
        :deep(.vue-img-cutter) {
            width: 100% !important;
            
            .vue-img-cutter__footer {
                position: absolute;
                bottom: -52px;
                left: -24px;
                width: calc(100% + 48px) !important;
                padding: 10px 16px;
                display: flex;
                justify-content: flex-end;
                gap: 8px;
                border-top: 1px solid #f0f0f0;
            }
            
            .vue-img-cutter__container {
                width: 100% !important;
            }
        }
    }
    .cropper-warp-right {
        width: 150px;
        .cropper-warp-right-title {
            text-align: center;
            height: 20px;
            line-height: 20px;
            margin-bottom: 20px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
        }
        .cropper-warp-right-item {
            margin: 15px 0;
            .cropper-warp-right-value {
                display: flex;
                justify-content: center;
                .cropper-warp-right-value-img {
                    border: 1px solid #f0f0f0;
                }
            }
            .cropper-warp-right-label {
                text-align: center;
                font-size: 12px;
                color: rgba(0, 0, 0, 0.45);
                height: 30px;
                line-height: 30px;
            }
        }
}
}
</style>